<template>
  <div id="my_earnings">
    <c-title :hide="false" :text="'领取收益'">
    </c-title>
      <!--新的样式-->
      <div class="myEarnings-bg" :style="{backgroundImage:`url(${earningsImg})`}">
        <div class="earnings-list">
            <block  v-for="(item,i) in all_amount" :key='i' class="earnings-block">
              <div class="earnings-item flex flex-a-c flex-j-sb" @click="toEarningList(item)" >
                <div class="earnings-wrap flex flex-a-c">
                  <!--分销佣金-->
                  <div class="wrap-icon" v-if="item.type == 'commission'">
                    <img :src="item.url" />
                  </div>
                  <!--区域分红-->
                  <div class="wrap-icon" v-if="item.type == 'areaDividend'">
                    <img :src="item.url" />
                  </div>
                  <!--招商分红-->
                  <div class="wrap-icon" v-if="item.type == 'merchant'">
                    <img :src="item.url" />
                  </div>
                  <!--经销商提成-->
                  <div class="wrap-icon" v-if="item.type == 'teamDividend'">
                    <img :src="item.url" />
                  </div>
                  <!--周度奖励-->
                  <div class="wrap-icon" v-if="item.type == 'weeklyRewards'">
                    <img :src="item.url" />
                  </div>
                  <div class="wrap-content">
                    <h3>{{item.title}}</h3>
                    <p>{{$i18n.t('money')}}{{item.amount}}{{$i18n.t('元')}}</p>
                  </div>
                </div>
                <div class="earnings-btn">去领取</div>
              </div>
            </block>
           

        </div>
      </div>
      
  </div>
</template>

<script>
import my_earnings_controller from "./my_earnings_controller";

export default my_earnings_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .myEarnings-bg {
    width:100%;
    padding:5.75rem 0 0 0;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
  }
  .earnings-list {
    margin:0px 12px 0 12px;
    background: #FFFFFF;
    border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
    padding:0.9375rem 0.9375rem 0.1875rem 0.9375rem;
    .earnings-item {
      background: #FFF4F3;
      border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
      padding:0.625rem;
      margin:0 0 12px 0;
     
      .wrap-icon {
        background: #FFFFFF;
        border-radius: 1.125rem 1.125rem 1.125rem 1.125rem;
        width: 3rem;
        height: 3rem;
        img {
          width: 100%;
          height: auto;
          display: block;
        }
      }
      .wrap-content {
        padding:0 0 0 0.625rem;
        h3 {
          font-weight: bold;
          font-size: 0.9375rem;
          padding:0 0 0.3125rem 0;
          color: #00001C;
          text-align: left;
        }
        p {
          font-size: 0.875rem;
          color: #F15353;
        }
      }
      .earnings-btn {
        border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
        border: 0.0625rem solid #F15353;
        font-size: 0.875rem;
        line-height: 0.875rem;
        color: #F15353;
        padding:0.5rem 0.8125rem;
      }
    }
  }
</style>
